<template>
  <div class="taskMDialog typeMapDia">
    <el-dialog
      title="添加目标标识符"
      :visible.sync="dialogVisible"
      width="70%"
      :close-on-click-modal="false"
    >
      <div class="dialog-block">
        <!-- 拼接字段展示区域 -->
        <div class="splice-text-content mgb15">
          <el-row :gutter="10" class="text-current-theme">
            <el-col :span="3">
              <span>已选择</span>
            </el-col>
            <el-col :span="5">
              <span>名称:</span>
              <el-tooltip :content="finalName" placement="top">
                <div class="result">{{finalName}}</div>
              </el-tooltip>
            </el-col>
            <el-col :span="5">
              <span>标识符:</span>
              <el-tooltip :content="finalBSF" placement="top">
                <div class="result">{{finalBSF}}</div>
              </el-tooltip>
            </el-col>
            <el-col :span="5">
              <span>数据类型:</span>
              <el-tooltip :content="finalType" placement="top">
                <div class="result">{{finalType}}</div>
              </el-tooltip>
            </el-col>
            <el-col :span="5">
              <span>说明:</span>
              <el-tooltip :content="finalSM" placement="top">
                <div class="result">{{finalSM}}</div>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
        <div class="determiners-content mgb15">
          <div class="flex-bt">
            <div class="flex-left">
              <el-checkbox size="small" v-model="useDeterminers">请选择限定词：</el-checkbox>
              <div v-if="useDeterminers">
                <el-input size="small" v-model="chineseName" clearable placeholder="请输入名称/标识符"></el-input>
              </div>
            </div>
            <div>
              <el-button v-if="useDeterminers" @click="handleSearchDeterminer">查询</el-button>
            </div>
          </div>
          <div v-if="useDeterminers">
            <el-table
              ref="table"
              :data="determinersList"
              height="250"
              size="small"
              v-loading="determinersLoading"
              stripe
            >
              <el-table-column label width="55">
                <template slot-scope="scope">
                  <el-radio
                    :label="scope.row.bsf"
                    v-model="determinerRadio"
                    @change.native="handleDeterminerCheck(scope.$index,scope.row)"
                  >&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column type="index" label="序号" width="100"></el-table-column>
              <el-table-column prop="zwmc" label="名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="bsf" label="标识符" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sm" label="说明" show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="clearfix enc-pagination" style="margin: 0;height:50px">
              <el-pagination
                style="float:right"
                background
                :current-page="paginationTop.currentPage"
                :page-sizes="[10,20,50,100]"
                @size-change="sizeChangeTop"
                @current-change="currentChangeTop"
                :total="paginationTop.total"
                :page-size="paginationTop.pageSize"
                layout="prev,pager,next,sizes,total"
              ></el-pagination>
            </div>
          </div>
        </div>
        <div>
          <div class="flex-bt">
            <div class="flex-left">
              <div class="left">
                <select-tree :treeData="themeOptions" @select="themeChange" />
              </div>
              <div class="right">
                <span class="label">名称/标识符：</span>
                <div class="input-block">
                  <el-input
                    size="small"
                    placeholder="请输入名称/标识符"
                    v-model="ruleForm.contents"
                    clearable
                  ></el-input>
                </div>
              </div>
            </div>
            <div class="flex-right btn-area">
              <el-button class="pull-right" @click="getTable(1)">查询</el-button>
            </div>
          </div>
          <div>
            <el-table
              ref="table"
              size="small"
              :data="tableData"
              height="250"
              v-loading="loading"
              stripe
            >
              <el-table-column label width="55">
                <template slot-scope="scope">
                  <el-radio
                    size="small"
                    :label="scope.row.bsf"
                    v-model="templateRadio"
                    @change.native="getTemplateRow(scope.$index,scope.row)"
                  >&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column type="index" label="序号" width="100"></el-table-column>
              <!-- <el-table-column prop="ztName" label="主题分类" show-overflow-tooltip></el-table-column> -->
              <el-table-column prop="zwmc" label="名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="bsf" label="标识符" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sjlx" label="数据类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sm" label="说明" show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="clearfix enc-pagination" style="margin:20px 0">
              <el-pagination
                style="float:right"
                background
                :current-page="pagination.currentPage"
                :page-sizes="[10,20,50,100]"
                @size-change="sizeChange"
                @current-change="currentChange"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                layout="prev,pager,next,sizes,total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="emitData" :disabled="!templateRadio">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SelectTree from "@/components/selectTree";
import { Message } from "element-ui";
import { mapGetters } from "vuex";
export default {
  components: { SelectTree },
  data() {
    return {
      dialogVisible: false,
      determinersLoading: false, //限定词部分的loading
      loading: false,
      tableData: [],
      templateRadio: "",
      templateSelection: {},
      ruleForm: {
        themeType: "",
        contents: ""
      },
      themeOptions: [],
      currentRow: [],
      pagination: {
        pageSize: 10,
        currentPage: 1,
        total: 10
      },
      paginationTop: {
        pageSize: 10,
        currentPage: 1,
        total: 10
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      useDeterminers: false,
      chineseName: "", //限定词搜索词
      determinersList: [], //限定词tableList
      determinersTotal: 0,
      deternersCurPage: 1, //初始page
      determinerRadio: "", //限定词选中的值
      selectedDeterminerRow: {} //当前选中的限定词行
    };
  },
  mounted() {
    this.pagination.pageSize = 10;
    this.paginationTop.pageSize = 10;
  },
  watch: {
    useDeterminers(newVal, oldVal) {
      if (newVal) {
        this.determinersLoading = true;
        this.getDeterminersList(); //获取限定词list
      } else {
        this.determinersSearchTerm = "";
        this.selectedDeterminerRow = {}; //清空已选择的限定词row
      }
    }
  },
  computed: {
    ...mapGetters(["getDictionaryList"]),
    finalName() {
      if (
        (this.templateSelection && this.templateSelection.zwmc) ||
        (this.selectedDeterminerRow && this.selectedDeterminerRow.zwmc)
      ) {
        return `${
          this.selectedDeterminerRow && this.selectedDeterminerRow.zwmc
            ? this.selectedDeterminerRow.zwmc
            : ""
        }${
          this.templateSelection && this.templateSelection.zwmc
            ? this.templateSelection.zwmc
            : ""
        }`;
      } else {
        return "";
      }
    },
    //拼接后的标识符
    finalBSF() {
      if (
        JSON.stringify(this.templateSelection) !== "{}" ||
        (this.selectedDeterminerRow && this.selectedDeterminerRow.bsf)
      ) {
        return `${
          JSON.stringify(this.selectedDeterminerRow) !== "{}"
            ? this.selectedDeterminerRow.bsf + "_"
            : ""
        }${
          this.templateSelection && this.templateSelection.bsf
            ? this.templateSelection.bsf
            : ""
        }`;
      } else {
        return "";
      }
    },
    finalType() {
      return this.templateSelection && this.templateSelection.sjlx
        ? this.templateSelection.sjlx
        : "";
    },
    finalSM() {
      if (
        (this.templateSelection && this.templateSelection.sm) ||
        (this.selectedDeterminerRow && this.selectedDeterminerRow.sm)
      ) {
        return `${
          this.selectedDeterminerRow && this.selectedDeterminerRow.sm
            ? this.selectedDeterminerRow.sm
            : ""
        }${
          this.templateSelection && this.templateSelection.sm
            ? this.templateSelection.sm
            : ""
        }`;
      } else {
        return "";
      }
    }
  },
  methods: {
    openDialog(row, useOldDeterminer) {
      const pivotIndex = row.logicColumnName.lastIndexOf("_");
      const pureBSF = row.logicColumnName.slice(pivotIndex + 1); //获取到纯净的数据元标识符
      const pureDeterminerBSF = row.logicColumnName.slice(
        0,
        pivotIndex == -1 ? 0 : pivotIndex
      ); //获取到的纯净的限定词标识符

      //之前选择过限定词
      if (pureDeterminerBSF && row.isStandard == 1) {
        this.useDeterminers = true;
        this.determinerRadio = pureDeterminerBSF; //默认选中
        this.getDeterminersList();
      } else {
        this.useDeterminers = false;
        this.determinerRadio = "";
      }

      if (row.isStandard == 0) {
        this.templateSelection = {};
        this.selectedDeterminerRow = {}; //清空已选择的限定词row
      }
      this.ruleForm = { themeType: "", contents: "" }; //清空数据元选择
      this.determinersSearchTerm = ""; //清空限定词查询框
      this.templateRadio = pureBSF;
      this.dialogVisible = true;
      this.currentRow = row;
      this.getThemeOptions();
    },
    emitData() {
      if (JSON.stringify(this.templateSelection) !== "{}") {
        this.dialogVisible = false;
        let bsgs = this.templateSelection.bsgs;
        this.$emit("setMeta", {
          bsf: this.finalBSF,
          sjlx: this.finalType,
          sm: this.finalSM,
          zwmc: this.finalName,
          bsgs: bsgs
        });
      } else {
        Message({
          message: "请选择一个数据元",
          type: "warning"
        });
        return;
      }
    },
    themeChange(data) {
      this.ruleForm.themeType = data;
      this.getTable(1);
    },
    //限定词查询
    handleSearchDeterminer() {
      this.determinersLoading = true;
      this.getDeterminersList();
    },
    //限定词check
    handleDeterminerCheck(index, row) {
      this.selectedDeterminerRow = row;
    },
    async getDeterminersList(val) {
      if (val === 1) {
        this.paginationTop.currentPage = 1;
      }
      let params = {
        chineseName: this.chineseName,
        identifier: "",
        pageNum: this.paginationTop.currentPage,
        pageSize: this.paginationTop.pageSize
      };
      try {
        const result = await this.$api.dataMap.displayAllDeterminer(params);
        if (result.data.resultCode != 0) {
          throw result.data ? result.data.resultMessage : "获取限定词失败";
        }
        this.determinersLoading = false;
        this.determinersList = result.data.data.data;
        this.determinersTotal = result.data.data.recordTotal;
        this.paginationTop.total=result.data.data.recordTotal;
        //同步限定词选中数据
        if (this.determinerRadio) {
          this.determinersList.map(item => {
            if (item.bsf === this.determinerRadio) {
              this.selectedDeterminerRow = item;
            }
          });
        }
      } catch (err) {
        this.determinersLoading = false;
        if (err) {
          Message({
            message: err.data.resultMessage,
            type: "error"
          });
        }
      }
    },
    async getThemeOptions() {
      try {
        let data = this.getDictionaryList.ZTDX;
        this.themeOptions = this.getTreeData(data);
        this.getTable(1);
      } catch (error) {
        this.themeOptions = [];
      }
    },
    //过滤主题分类 列表中pcode 为00 的第一级菜单
    getTreeData(list) {
      const result = [];
      list = list.map(i => {
        return {
          id: i.dataValue,
          label: i.dataName,
          code: i.dataValue,
          pcode: i.pcode,
          children: []
        };
      });
      list.forEach(i => {
        const item = list.find(j => j.code === i.pcode);
        if (!item) {
          result.push(i);
        } else {
          item.children.push(i);
        }
      });
      return result;
    },
    async getTable(val) {
      let context = this;
      if (val === 1) {
        context.pagination.currentPage = 1;
      }
      context.loading = true;
      let params = {
        identifier: context.ruleForm.contents,
        pageNum: context.pagination.currentPage,
        pageSize: context.pagination.pageSize,
        themeCode: context.ruleForm.themeType.code
      };
      const res = await this.$api.dataMap.displayAllTableColumnDetails(params);
      context.loading = false;
      if (res.data.resultCode == 0) {
        context.pagination.currentPage = res.data.data.pageIndex;
        context.pagination.total = res.data.data.recordTotal;
        context.tableData = [];
        res.data.data.data.map((d, i) => {
          context.tableData.push(d);
          context.tableData[i].index =
            (res.data.data.pageNum - 1) * context.pagination.pageSize + i + 1;
        });
        const list = res.data.data.data;
        list.map(item => {
          if (item.bsf === context.templateRadio) {
            this.templateSelection = item;
          }
        });
      } else {
        context.$alert(
          res.data && res.data.resultMessage
            ? res.data.resultMessage
            : "未请求到数据",
          "提示",
          {
            confirmButtonText: "确定",
            type: "error",
            callback: action => {}
          }
        );
      }
    },
    getTemplateRow(index, row) {
      //获取选中数据
      this.templateSelection = row;
    },
    currentChange(val) {
      this.pagination.currentPage = val;
      this.getTable();
    },
    sizeChange(val) {
      this.pagination.pageSize = val;
      this.getTable(1);
    },
    currentChangeTop(val) {
      this.paginationTop.currentPage = val;
      this.getDeterminersList();
    },
    sizeChangeTop(val) {
      this.paginationTop.pageSize = val;
      this.getDeterminersList(1);
    }
  }
};
</script>
<style lang="scss" scoped>
.meta-data-search {
  .el-form,
  .el-form-item,
  .el-form-item__content {
    display: inline-block;
  }
  .el-form-item {
    margin-right: 25px;
  }
  .el-input {
    width: 200px;
  }
}
.splice-text-content {
  .result {
    display: inline-block;
    width: calc(100% - 80px);
    border-bottom: 1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: -3px 0 -3px 10px;
    text-align: center;
    color: #008eff;
  }
}
.flex-bt {
  display: flex;
  flex-direction: row;
  align-items: center;
  .flex-left,
  .flex-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    .right {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 10px;
      .input-block {
        width: 240px;
      }
    }
  }
  .flex-left {
    flex: 1;
  }
}
.dialog-block {
  height: 430px;
  padding: 10px;
  overflow: auto;
}
.mgb15 {
  margin-bottom: 15px;
}
</style>
